<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东</title>
    <link rel="icon" href="img/jd.png">
    <meta name="viewport" content="width=device-width">
    <script src="vconsole.js"></script>
    <script>
        new VConsole();
    </script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .clearfix::after{
        display: table;
        clear: both;
        content: "";
    }
    .fl{
        float: left;
    }
    #d1{
        box-sizing: border-box;
        width: 300px;
        height: 400px;
        background: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -250px;
        border-radius: 10px;
    }
    #d2{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.2);
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .title{
        padding: 10px;
        text-align: center;
        font-family: 宋体;
        font-weight: bolder;
    }
    .content{
        height: 200px;
        overflow: auto;
        font-size: 12px;
        padding: 10px 30px 10px 30px;
        box-sizing: border-box;
        text-indent: 2em;
        color: #670A0A;
    }
    .content span{
        border-bottom: 2px solid #8EA2E3;
    }
    .content a{
        text-decoration: none;
        color: #FF360B;
    }
    .notice{
        padding: 13px;
        box-sizing: border-box;
        font-size: 12px;
        border-radius: 10px 10px 0px 0px;
        margin-top: 10px;
        box-shadow:0px -3px 3px rgba(0,0,0,0.1); ;
    }
    .btns{
        height: 44px;
        border-top: 1px solid #eee;
    }
    .disagree{
        width: 50%;
        text-align: center;
        height: 61px;
        line-height: 61px;
        font-family:华文隶书;
        border-radius: 0px 0px 10px 0px;
    }
    .agree{
        width: 50%;
        text-align: center;
        height: 61px;
        line-height:61px;
        border-radius: 0px 0px 10px 0px;
        color: white;
        font-family: 华文隶书;
        background-image: linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18);
    }
    .top{
        text-align: center;
        line-height: 40px;
        height: 40px;
        background: url("") no-repeat 10px center;
        background-size: 24px;
    }
    .teldiv{
        margin: 20px 20px 60px 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px ;
        background:url() no-repeat 37px 12px;
        background-size:14px;
    }
    .teldiv input{
        outline: none;
        border: none;
        height: 32px;
        font-size: 16px;
        margin-left: 24px;
        width: 240px;
    }
    ::placeholder{
        font-size: 16px;
        color: #85bae4;
    }
    .nextbtn{
        margin: 20px;
        height: 55px;
        text-align: center;
        line-height: 50px;
        height: 50px;
        border-radius: 28px;
        background: linear-gradient(90deg,#fab3b3,#ffbcb3 73%,#ffcaba);
        color: #ffffff;
        box-shadow: 0 0.1rem 20px 0 rgba(255,62,62,.2);
    }
    .nextbtn:hover{
        background-image: linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18);;
    }
</style>
<body>
<a href="index.html">作业一</a>
<a href="demo.html">作业二</a>
<a href="new.html">作业三</a>
<a href="temp.html">作业四</a>
<div class="top">
    京东注册
</div>
<div class="teldiv">
    <span>+86</span>
    <input placeholder="请输入手机号" />
</div>
<div class="nextbtn">
    下一步
</div>

<div id="d2"></div>
<div id="d1">
    <div class="title">
        注册协议及隐私政策
    </div>
    <div class="content">
        在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
        <span>请您务必仔细阅读充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：</span><br> <a href="">《京东用户注册协议》</a> <br> <a href="">《京东隐私政策》</a>
        <br><a href="">《订单共享与安全》</a> <br> <span>【请您注意】如果您不同意上述协议或其中任何条款约定 <br> 请您停止注册。<br>
        &nbsp;&nbsp; &nbsp;&nbsp; 您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息、阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容；并表明您也同意京东可以依据以上的隐私政策内容来处理您的个人信息。</span> 如您对以上协议内容有任何疑问，您可随时与京东客服联系。
    </div>
    <div class="notice">
        点击同意即表示您已阅读并同意
        《京东用户注册协议》与
        《京东隐私政策》
        并将您的订单信息共享给为完成此订单所必须的第三方合作方。关于
        《订单共享与安全》
    </div>
    <div class="btns">
        <div class="fl disagree">不同意</div>
        <div class="fl agree" onclick="btn()">同意</div>
    </div>
</div>
<script>
    function btn(){
        d1.style.display = "none";
        d2.style.display = "none";
    }
</script>
</body>
</html>